<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/css/footer.css">
    <link rel="stylesheet" href="/css/header.css">
    <title>购物车</title>
    <script src="../libs/requirejs/require.min.js" data-main="../js/cart"></script>
</head>
<style>
    .cart-box{
        margin-top: 200px;
        width: 1000px;
        height: 600px;
    }
    .cart-box h1{
        margin:0 auto;
        text-align: center;
        margin-left: 200px;
    }
    .cart-table{
        text-align: center;
        margin-left: 200px;
    }
    #checkAll{
        margin-left: 240px;
    }
    #checkAll #checkOne{
        display: block;
        width: 20px;
        height: 20px;
    }

</style>
<body>
    <div class="cart-box">
    <h1>我的购物车</h1>
<input type="checkbox" id="checkAll" class="checkAll">全部购买
<table border="1" class="cart-table">
    <thead>
    <tr>
        <th width="100px" height="50px"></th>
        <th width="100px" height="50px">商品编号</th>
        <th width="120px" height="50px">商品图片</th>
        <th width="150px" height="50px">商品标题</th>
        <th width="80px" height="50px"> 商品价格</th>
        <th width="80px" height="50px">选购数量</th>
        <th width="120px" height="50px">小计</th>
        <th width="100px" height="50px">操作</th>
    </tr>
    </thead>
    <tbody class="cart-body">
    </tbody>
    <tfoot>
    <tr>
        <td colspan="5">合计</td>
        <td colspan="2" class="total">0.00</td>
    </tr>
    </tfoot>
</table>
</div>

<script type="text/html" id="cart-template">
    {{if cart.length === 0}}
    <tr>
        <td colspan="6">购物车为空，请<a href="http://localhost:3000/html/list.html">选购商品</a></td>
    </tr>
    {{else}}
        {{each cart $value}}
        <tr data-id="{{$value.id}}" class="cart-id">
            <td><input type="checkbox" id="checkOne" class="checkOne" {{$value.checked}} ></td>
            <td>{{$value.id}}</td>
            <td><img src="{{$value.image}}" style="width: 64px; height: 64px;"></td>
            <td>{{$value.title}}</td>
            <td>{{$value.price}}</td>
            <td>
                <button class="minus">-</button>
                <span class="amount">{{$value.amount}}</span>
                <button class="plus">+</button>
            </td>
        <td class="sub">{{$value.price * $value.amount}}</td>
        <td><button class="del">删除</button></td>
        </tr> 
        <!-- <tr>
            <td>{{$value.id}}</td>
            <td>{{$value.title}}</td>
            <td>{{$value.price}}</td>
            <td>{{$value.amount}}</td>
            <td>{{$value.price * $value.amount}}</td>
            <td><button>删除</button></td>
        </tr>-->
        
        {{/each}}
    {{/if}}
    
</script>
</body>
</html>